<!--
 * hi-badge - 徽标数
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-badge" :class="_classes" :style="_styles" v-if="isShow" @tap="_emits('click')">
        {{ fmtValue }}
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { computed } from "vue";
    import props from "./props.js";
    import { floatFormat } from "../../functions";

    // 组件属性
    const _props = defineProps(props);

    // 组件事件
    const _emits = defineEmits(["click"]);

    // 组件类名
    const _classes = computed(() => {
        const classes = [];

        // 模式
        classes.push(`hi-badge--${_props.mode}`);

        // absolute 布局
        if (_props.absolute) classes.push("hi-badge--absolute");

        // 主题
        if (_props.theme) classes.push(`hi-badge--theme hi-badge--theme-${_props.theme}`);

        // 镂空
        if (_props.plain) classes.push("hi-badge--plain");

        // 浅化背景
        if (_props.tint) classes.push("hi-badge--tint");

        // 边框
        if (_props.border) classes.push("hi-badge--border");

        return classes;
    });

    // 组件样式
    const _styles = computed(() => {
        const styles = [];

        // top、left、right、bottom
        if (_props.top) styles.push(`top: ${_props.top}`);
        if (_props.left) styles.push(`left: ${_props.left}`);
        if (_props.right) styles.push(`right: ${_props.right}`);
        if (_props.bottom) styles.push(`bottom: ${_props.bottom}`);

        // transform
        if (_props.transform) styles.push(`transform: ${_props.transform}`);

        // 主题
        if (_props.theme) styles.push(`--hi-badge-theme: var(--hi-theme-${_props.theme})`);

        // 浅化透明度
        if (_props.tintOpacity) styles.push(`--hi-badge-background-opacity: ${_props.tintOpacity}`);

        // 背景
        if (_props.bg) styles.push(`--hi-badge-background: ${_props.bg}`);

        // 颜色
        if (_props.color) styles.push(`--hi-badge-color: ${_props.color}`);

        // 文字大小
        if (_props.fontSize) styles.push(`--hi-badge-font-size: ${_props.fontSize}`);

        // 宽
        if (_props.width) styles.push(`--hi-badge-width: ${_props.width}`);

        // 高
        if (_props.height) styles.push(`--hi-badge-height: ${_props.height}`);

        // 圆点大小
        if (_props.mode === "dot" && _props.dotSize) {
            styles.push(`--hi-badge-width: ${_props.dotSize}`);
            styles.push(`--hi-badge-height: ${_props.dotSize}`);
        }

        // 边框样式
        if (_props.borderWidth) styles.push(`--hi-badge-border-width: ${_props.borderWidth}`);
        if (_props.borderStyle) styles.push(`--hi-badge-border-style: ${_props.borderStyle}`);
        if (_props.borderColor) styles.push(`--hi-badge-border-color: ${_props.borderColor}`);

        // 圆角大小
        if (_props.radius) styles.push(`--hi-badge-border-radius: ${_props.radius}`);

        return styles;
    });

    // 是否显示
    const isShow = computed(() => {
        if (_props.mode !== "dot" && !_props.showZero && _props.value === 0) return false;
        return true;
    });

    // 格式化后的值
    const fmtValue = computed(() => {
        // 圆点模式
        if (_props.mode === "dot") return "";

        // overflow 模式
        if (_props.mode === "overflow") {
            if (Number(_props.value) > Number(_props.max)) return `${_props.max}+`;
            return _props.value;
        }

        // ellipsis 模式
        if (_props.mode === "ellipsis") {
            if (Number(_props.value) > Number(_props.max)) return `${_props.max}...`;
            return _props.value;
        }

        // limit 模式
        if (_props.mode === "limit") {
            if (Number(_props.value) > Number(_props.limit))
                return floatFormat(Number(_props.value) / Number(_props.limit), _props.decimals, _props.discardLastZero) + _props.suffix;
            return _props.value;
        }

        // 默认
        return _props.value;
    });
</script>

<style lang="scss" scoped>
    .hi-badge {
        background: var(--hi-badge-background, var(--hi-background-default, none));
        color: var(--hi-badge-color, inherit);
        border-radius: var(--hi-badge-border-radius, 100px);
        padding: var(--hi-badge-padding, 0 10px);
        position: var(--hi-badge-position, relative);
        display: var(--hi-badge-display, inline-flex);
        align-items: var(--hi-badge-align-items, center);
        justify-content: var(--hi-badge-justify-content, center);
        font-size: var(--hi-badge-font-size, 0.8em);
        width: var(--hi-badge-width, auto);
        height: var(--hi-badge-height, auto);
        z-index: var(--hi-badge-z-index, 8);
        left: var(--hi-badge-left, auto);
        right: var(--hi-badge-right, auto);
        top: var(--hi-badge-top, auto);
        bottom: var(--hi-badge-bottom, auto);
        transform: var(--hi-badge-transform, initial);
        border: var(--hi-badge-border-width, 0) var(--hi-badge-border-style, solid) var(--hi-badge-border-color, currentColor);

        // 圆点模式
        &--dot {
            width: var(--hi-badge-height, 8px);
            height: var(--hi-badge-height, 8px);
            border-radius: var(--hi-badge-border-radius, 50%);
            padding: var(--hi-badge-padding, 0);
        }

        // absolute 布局模式
        &--absolute {
            position: var(--hi-badge-position, absolute);
        }

        // 主题
        &--theme {
            background: var(--hi-badge-background, var(--hi-badge-theme, var(--hi-background-default)));
            color: var(--hi-badge-color, #ffffff);
        }

        // 镂空
        &--plain {
            background: var(--hi-badge-background, transparent);
            color: var(--hi-badge-color, var(--hi-badge-theme, inherit));
            border-width: var(--hi-badge-border-width, 1px);
        }

        // 浅化
        &--tint {
            background: transparent;
            color: var(--hi-badge-color, var(--hi-badge-theme, inherit));

            &::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                z-index: 0;
                background: var(--hi-badge-background, var(--hi-badge-theme, var(--hi-background-default)));
                opacity: var(--hi-badge-background-opacity, 0.2);
                border-radius: inherit;
            }
        }

        // 边框
        &--border {
            border-width: var(--hi-badge-border-width, 1px);
        }
    }
</style>
